<template>
  <div
    ref="myProgress"
    id="myProgress"
    :style="{ width }"
    @click="onClickHandler($event)"
    @mousedown="onmousedownHandler($event)"
    @mousemove="onmousemoveHandler($event)"
  >
    <el-progress
      :color="backgroundColor"
      :percentage="percentage"
      :show-text="false"
      style="width: 100%"
    ></el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progressmousedown: false,
    };
  },
  methods: {
    onClickHandler(e) {
      this.$emit("change", (e.layerX / this.realWidth) * 100);
    },
    onmousedownHandler(e) {
      this.progressmousedown = true;
    },
    onmousemoveHandler(e) {
      if (this.progressmousedown) {
        this.$emit("change", (e.layerX / this.realWidth) * 100);
      }
    },
  },
  props: {
    // 进度条宽度
    width: {
      type: String,
      default: "100%",
    },
    // 进度条百分比
    percentage: {
      type: Number,
      default: 0,
    },
    // 进度条背景色
    backgroundColor: {
      type: String,
    },
  },
  created() {
    document.addEventListener("mouseup", (e) => {
      this.progressmousedown = false;
    });
  },
  mounted() {
    // 获取进度条真实长度
    this.realWidth = this.$refs.myProgress.offsetWidth;
  },
};
</script>

<style lang="scss" scoped>
#myProgress {
  cursor: pointer;
}
</style>